<template>
  <van-tabbar
    v-model="active"
    route
    active-color="#212121"
    inactive-color="#999999"
  >
    <van-tabbar-item to="/">
      <span>首页</span>
      <template #icon="">
        <img src="../../assets/image/tabbar/home.png" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/fenlei">
      <span>分类</span>
      <template #icon="">
        <img src="../../assets/image/tabbar/fenlei.png" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/cart">
      <span>购物车</span>
      <template #icon="">
        <img src="../../assets/image/tabbar/cart.png" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/my">
      <span>我的</span>
      <template #icon="">
        <img src="../../assets/image/tabbar/my.png" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script lang="ts">
  import { defineComponent, ref } from "vue";
  import { Tabbar, TabbarItem } from "vant";
  import { useRoute } from "vue-router";
  export default defineComponent({
    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
    },
    setup() {
      const route = useRoute();
      const active = ref(route.path);
      return { active };
    },
  });
</script>
